<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            #app {
                width: 100%;
            }

            .top {
                width: 100%;
                height: 120px;
                position: fixed;
                margin-bottom: 10px;
                top: 0;
            }

            .top img {
                width: 100%;
                border-bottom: #e6e6e6 1px solid;
            }
            .middle {
                margin-top: 200px;
                margin-bottom: 49px;
            }
            .middle ul{
                margin-left: 20px;
            }
            .middle ul li{
                justify-content: space-around;
                height: 120px;
                display: flex;
                flex-direction: column;
                border-bottom: #e6e6e6 1px solid;
                padding: 10px 0;
            }
            .middle button{
                background: white;
                padding: 2px;
                font-size: 12px;
                margin-right: 5px;
            }
             .middle .btn{
                background: #57c0f8;
                border: none;
                color: white;
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 17px;
            }
             .middle .title{
                 font-size: 16px;
             }
             .middle .title .sp1{
                 font-size: 18px;
                 color: #f13d37;
             }
            .middle .title .sp2{
                font-size: 12px;
                color: #f13d37;
            }
            .middle .address{
                font-size: 13px ;
                color: #666666;
            }
            .middle .card{
                font-size: 12px;
                color: #a59999;
            }

            .footer {
                width: 100%;
                position: fixed;
                bottom: 0;
                height: 50px;
            }

            .footer img {
                width: 100%;
            }

        </style>
    </head>
    <body>

        <div id="app">
            <!--将组件渲染到页面上-->
            <mytop></mytop>
            <!--将父组件的参数传给子组件-->
            <div class="middle">
                <ul>
                    <li v-for="i in cinemas">
                        <div class="title">{{i.nm}}<span class="sp1">{{i.sellPrice}}</span><span class="sp2">元起</span></div>
                        <div class="address">{{i.addr}}</div>
                        <div>
                            <button v-for="k in i.labels" :style="'color:'+k.color+';'+'border: 1px solid '+k.color">
                                {{k.name}}</button>
                        </div>
                        <div class="card" v-show="i.promotion.cardPromotionTag!=''"><button class="btn">卡</button>{{i.promotion.cardPromotionTag}}</div>
                    </li>
                </ul>
            </div>
            <!--<mymiddle :movie="movie"></mymiddle>-->
            <myfooter></myfooter>
        </div>

        <script src="../js/vue.js"></script>
        <script src="../js/axios.min.js"></script>
        <script>

            //顶部组件
            var mytop = {
                template: `<div class="top">
                                <img src="./img/img_1.png" alt="">
                            </div>`
            }
            //中间组件
            var mymiddle = {
                //接收参数
                //渲染
                template: ``
            }
            //底部组件
            var myfooter = {
                template: `<div class="footer">
                                <img src="./img/foot.png" alt="">
                            </div>`
            }
            //父组件
            var app = new Vue({
                el: "#app",
                data: {
                    cinemas: [],
                },

                //获取数据可以在 created \ beforeMount \ mounted 钩子函数中
                created() {
                    axios.get("../json/yingyuan.json").then(res => {
                        console.log(res.data.data.cinemas);
                        this.cinemas = res.data.data.cinemas;
                    });
                },
                //引入组件
                components: {
                    mytop, mymiddle, myfooter
                }
            })
        </script>
    </body>
</html>